<form class="form-horizontal" role="form" action="/index.php?s=Admin/Goods/update.html" method="POST">
    <div class="form-group">
        <label class="col-sm-2 control-label" for="category">类目：</label>
        <div class=" col-sm-6">
            <input id="category" name="category_id" type="text" class="form-control" placeholder="选择商品类目">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">商品类型：</label>
        <div class=" col-sm-6">
            <label class="checkbox-inline">
                <input type="radio" name="is_new" id="is_new1" value="1" checked>全新
            </label>
            <label class="checkbox-inline">
                <input type="radio" name="is_new" id="is_new2" value="0">二手
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="title">商品标题：</label>
        <div class=" col-sm-6">
            <input id="title" name="title" type="text" class="form-control" placeholder="">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">30字以内</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="subtitle">商品卖点：</label>
        <div class=" col-sm-6">
            <textarea id="subtitle" name="subtitle" type="text" class="form-control" placeholder=""></textarea>
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">150字以内</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="price">一口价：</label>
        <div class=" col-sm-6">
            <input id="price" name="price" type="number" class="form-control" placeholder="">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">1.00</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="stock">商品数量：</label>
        <div class=" col-sm-6">
            <input id="stock" name="stock" type="number" class="form-control" placeholder="">
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">1</p>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="multimage">商品图片：</label>
        <div class=" col-sm-9 col-md-8 col-lg-7">


            <div id="multimageUpload">

                <ul id="multimageTab" class="nav nav-tabs">
                    <li class="active"><a href="#multimagetab1" data-toggle="tab">本地上传</a></li>
                    <li><a href="#multimagetab2" data-toggle="tab">图片空间</a></li>
                </ul>
                <div id="multimageTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="multimagetab1">
                        <div class="form-group">
                            <div class="center">
                                <input id="multimage" type="file" style="display:inline;" accept="image/gif, image/jpeg, image/png" >
                                <input name="multimage" type="text" style="display:inline;display:none;">
                            </div>

                            <div class="center">
                                <p class="form-control-static">提示：本地上传图片大小不能超过3M。</p>
                                <p class="form-control-static">本类目下您最多可以上传 5 张图片。</p>
                            </div>
                        </div>

                    </div>
                    <div class="tab-pane fade" id="multimagetab2">
                        <div class="file-list">
                            <div class="search-result">
                                <ul class="file nav">
                                    <li>
                                        <a href="#" >
                                            <img src="" onerror="this.src='__IMG__/logo_1.png'">
                                            <span class="pixel">64x64</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" >
                                            <img src="" onerror="this.src='__IMG__/logo_1.png'">
                                            <span class="pixel">64x64</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" >
                                            <img src="" onerror="this.src='__IMG__/logo_1.png'">
                                            <span class="pixel">64x64</span>
                                        </a>
                                    </li>

                                </ul>
                                <div class="page">
                                    <ul class="pagination pagination-sm">
                                        <li><a href="#">&laquo;</a></li>
                                        <li class="active"><a href="#">1</a></li>
                                        <li class="disabled"><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">&raquo;</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="multimage-gallery">
                    <p class="form-control-static">700*700 以上的图片可以在宝贝详情页主图提供图片放大功能</p>
                    <ul class="nav">
                        <li class="primary" data-index="1" data-img="0">
                            <div class="preview">
                                <img src=""/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                        </li>
                        <li class="" data-index="2" data-img="0">
                            <div class="preview">
                                <img src=""/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                        </li>
                        <li class="" data-index="3" data-img="0">
                            <div class="preview">
                                <img src=""/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                        </li>
                        <li class="" data-index="4" data-img="0">
                            <div class="preview">
                                <img src=""/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                        </li>
                        <li class="" data-index="5" data-img="0">
                            <div class="preview">
                                <img src=""/>
                            </div>
                            <div class="operate">
                                <i class="m-left fa fa-chevron-left" title="左移"></i>
                                <i class="m-right fa fa-chevron-right" title="右移"></i>
                                <i class="remove fa fa-remove" title="删除"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <script type="application/javascript">
                $(function(){
                    /**
                     * 商品图片上传
                     */
                    $("#multimage").uploadify({
                        'swf'      : '/static/plugin/uploadify/uploadify.swf',
                        'uploader' : '/index.php?s=Admin/Picture/upload',
                        "buttonText"      : "上传图片",
                        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
                        "onUploadSuccess" :uploadPicture
                        // Put your options here
                    });
                    function uploadPicture(file,data){
                        trace('上传成功');
                        var data = $.parseJSON(data);
                        trace(data);
                        if(data.status){
                            trace('上传成功');
                            var pics = $(".multimage-gallery ul li");
                            trace('共'+pics.length+'个图片容器');
                            for(var i=0; i<pics.length; i++){
                                if($(pics[i]).attr('data-img') == data.id){
                                    trace('已存在图片');
                                    return;
                                }
                            }
                            for(var i=0; i<pics.length; i++){
                                var img = $(pics[i]).find('div.preview').find('img');
                                var src = $(img).attr('src');
                                if(src.length<10){
                                    trace('第'+i+'图片容器增加src');
                                    trace(img);
                                    $(img).attr('src',data.path);
                                    $(pics[i]).attr('data-img',data.id);
                                    checkImg(pics[i]);
                                    break;
                                }else{
                                    trace('第'+i+'图片容器有src='+src);
                                }


                            }


                        }else{
                            trace('上传失败');
                        }
                    }

                    //左移
                    $(document).on('click','.m-left',function(){
                        trace('触发左移按钮');
                        var li = $(this).parent('.operate').parent('li');
                        var pre = $(li).prev('li');
                        var nex = $(li).next('li');
                        if($(pre).data('index')>=1){
                            trace('上一个索引是index= '+$(pre).data('index')+' 执行交换');
                            var src_tmp = $(pre).find('div.preview').find('img').attr('src');
                            var dat_tmp = $(pre).attr('data-img');
                            var src_now = $(li).find('div.preview').find('img').attr('src');
                            var dat_now = $(li).attr('data-img');
                            $(pre).find('div.preview').find('img').attr('src',src_now);
                            $(pre).attr('data-img',dat_now);
                            $(li).find('div.preview').find('img').attr('src',src_tmp);
                            $(li).attr('data-img',dat_tmp);
                            trace('交换完毕');
                            checkImg(li);
                            checkImg(pre);
                        }else{
                            trace('不执行交换');
                        }
                    });
                    //右移
                    $(document).on('click','.m-right',function(){
                        trace('触发左移按钮');
                        var li = $(this).parent('.operate').parent('li');
                        var pre = $(li).prev('li');
                        var nex = $(li).next('li');
                        if($(nex).data('index')>=1){
                            trace('下一个索引是index= '+$(pre).data('index')+' 执行交换');
                            var src_tmp = $(nex).find('div.preview').find('img').attr('src');
                            var dat_tmp = $(nex).attr('data-img');
                            var src_now = $(li).find('div.preview').find('img').attr('src');
                            var dat_now = $(li).attr('data-img');
                            $(nex).find('div.preview').find('img').attr('src',src_now);
                            $(nex).attr('data-img',dat_now);
                            $(li).find('div.preview').find('img').attr('src',src_tmp);
                            $(li).attr('data-img',dat_tmp);
                            checkImg(li);
                            checkImg(nex);
                            trace('交换完毕');
                        }else{
                            trace('不执行交换');
                        }
                    });
                    //删除
                    $(document).on('click','.remove',function(){
                        var li = $(this).parent('.operate').parent('li');
                        $(li).find('div.preview').find('img').attr('src','');
                        checkImg(li);
                    });
                    function checkImg(li){
                        var src = $(li).find('div.preview').find('img').attr('src');
                        if(src.length>10){
                            $(li).addClass('has-img');
                        }else{
                            $(li).removeClass('has-img');
                        }
                        var pics = $(".multimage-gallery ul li");
                        var val = '';
                        for(var i=0; i<pics.length; i++){
                            if($(pics[i]).attr('data-img')>=1){
                                val = val + $(pics[i]).attr('data-img')+ ',';
                            }
                        }
                        $("input[name='multimage']").val(val);
                        trace('multimage = '+$("input[name='multimage']").val());


                    }
                });
            </script>


        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label" for="content">商品详情：</label>
        <div class=" col-sm-6">
            <div class="yeditor">
                <div class="y-header">
                    <i class="fa fa-code"></i><i class="fa fa-desktop"></i>|
                    <i class="fa fa-align-left"></i><i class="fa fa-align-justify"></i><i class="fa fa-align-right"></i>|
                    <i class="fa fa-chain"></i><i class="fa fa-chain-broken"></i>|
                    <i class="fa fa-bold"></i><i class="fa fa-italic"></i><i class="fa fa-underline"></i><i class="fa fa-strikethrough"></i>
                </div>
                <div id="content" class="y-body" contentEditable=true ></div>
                <input name="content" hidden="hidden" type="text">
            </div>
        </div>
        <div class="col-sm-2">
            <p class="form-control-static">商品详情</p>
        </div>
    </div>

    <button type="submit" class="btn btn-default">发布</button>
</form>